<template>
  <div class="bigMap">
    <!-- <img
      src="https://image.hezongyy.com/pcimage/20211109img/mapborder.png"
      alt=""
      class="mapbd"
    /> -->
    <div id="mapid" style="height: 764px; width: 944px"></div>
    <!-- <router-link to='/hangzhou'>杭州</router-link> -->
  </div>
</template>

<script>
import url from "../api/apiUrl";
import { getRequest } from "../api/indexGet";
import sichuan from "../lib/sichuan.json"; // 引入杭州市地图数据(引入方式重点，本人用其他方式报错)
// import mapData from "../lib/mapData.json";
export default {
  props: {
    type: {
      default: 0,
    },
  },
  data() {
    return {
      totalAxios: null, //定时器
      allData: [
        {
          startLat: "45.165732",
          startLng: "126.139283",
          tollStationName: "总1",
          totalType: "12345",
          list: [
            {
              fromToTollStationName: "总1-1",
              startLat: "45.508675",
              startLng: "126.513409",
              trafficFlow: 123,
            },
            {
              fromToTollStationName: "总1-2",
              startLat: "45.386216",
              startLng: "126.410610",
              trafficFlow: 12345,
            },
            {
              freight: 93353350,
              fromToTollStationName: "总1-3)",
              startLat: "46.165732",
              startLng: "126.139283",
              trafficFlow: 6933570,
            },
          ],
        },
        {
          startLat: "47.993455",
          startLng: "123.486567",
          tollStationName: "总2",
          totalType: "12345",
          list: [
            {
              fromToTollStationName: "总2-1",
              startLat: "45.508675",
              startLng: "126.513409",
              trafficFlow: 1234,
            },
            {
              fromToTollStationName: "总2-2",
              startLat: "47.293455",
              startLng: "123.486567",
              trafficFlow: 11111,
            },
            {
              fromToTollStationName: "总2-3",
              startLat: "45.177807",
              startLng: "126.174966",
              trafficFlow: 4321,
            },
          ],
        },
        {
          startLat: "47.342922",
          startLng: "124.086943",
          tollStationName: "总3",
          totalType: "12345",
          list: [
            {
              fromToTollStationName: "总3-1",
              startLat: "47.442922",
              startLng: "124.086943",
              trafficFlow: 2321,
            },
            {
              fromToTollStationName: "总3-2",
              startLat: "47.292132",
              startLng: "124.520282",
              trafficFlow: 12345,
            },
            {
              fromToTollStationName: "总3-3",
              startLat: "47.153795",
              startLng: "124.878718",
              trafficFlow: 54321,
            },
          ],
        },
      ],
      mapEcharts: "",
      mapImg: require("../assets/img/地图选中销量bg.png"),
      linesDataAll: [],
      locationCarsList: [], //热力图数据
      coverData: [], // 地区颜色-覆盖数据
      highestData: 0, //最高
      minimumData: 0, //最低
    };
  },
  async mounted() {
    await this.getData();
    this.setgreenCarRoute(this.allData, 1);
    this.intervalAxios();
  },
  methods: {
    // 在画图之前，先整理一下数据，调用下面方法
    resetData(data, type, lines) {
      // data代表返回的数据
      // type为1，流入；type为2 流出。
      let result = {
        totalType: "", //总的为流入还是流出
        falseTotalType: "", //totalType为lr，则falseTotalType为lc；反之为lr
        linesData: [],
        effectScatterData: [],
      };
      if (type == 1) {
        result.totalType = "lr";
        result.falseTotalType = "lc";
      } else {
        result.totalType = "lc";
        result.falseTotalType = "lr";
      }
      lines.forEach((item, index) => {
        result.effectScatterData.push({
          type: result.totalType,
          i: index + 1,
          traffiFlow: item.gmv,
          name: item.name,
          value: [item.longitude, item.latitude],
        });
        //由于只需要渲染有数量的城市
        if (item.gmv > 0) {
          if (type == 1) {
            //判断是流入图还是流出图，1为流入
            result.linesData.push({
              fromName: "成都", //开始地点name
              toName: item.name, //目的地地点name
              coords: [
                ["104.065735", "30.659462"], //开始地点的坐标
                [item.longitude, item.latitude], //目的地的坐标
              ],
              traffiFlow: item.gmv,
            });
          } else {
            //流出的话，就调换开始和结束的位置即可
            result.linesData.push({
              fromName: item.tollStationName,
              toName: el.fromToTollStationName,
              coords: [
                [item.startLng, item.startLat],
                [el.startLng, el.startLat],
              ],
            });
          }
          result.effectScatterData.push({
            //这里就是把所有的要标注的位置给集合一下，不管是流入还是流出
            type: result.falseTotalType,
            i: index + 1,
            traffiFlow: item.gmv,
            name: item.name,
            value: [item.longitude, item.latitude],
          });
        }
      });
      return result;
    },
    // 开始画图：
    setgreenCarRoute(data, contype) {
      let mapdata = this.resetData(data, contype, this.linesDataAll); //画图之前调用该方法，整理后台返回数据，获得最终所需数据
      if (
        this.mapEcharts != null &&
        this.mapEcharts != "" &&
        this.mapEcharts != undefined
      ) {
        this.mapEcharts.dispose(); //销毁
      }
      this.mapEcharts = this.echarts.init(document.getElementById("mapid"));
      let option = {
        tooltip: {
          show: true,
          trigger: "item",
          formatter: (params) => {
            let resultGvm = 0;
            this.allData.map((obj) => {
              if (params.name.indexOf(obj.name) >= 0) {
                resultGvm = this.$parent.toThousands(obj.gmv);
              }
            });
            // var res =
            //   '<img src="https://image.hezongyy.com/pcimage/20211109img/mapImg.png" />';
            let result = "￥" + resultGvm + "<br>" + params.name;
            return result;
          },
          backgroundColor: "rgba(13,38,116,0.6)",
          borderColor: "rgba(1,253,253,1)",
          textStyle: {
            color: "#FFFFFF",
            fontSize: "18px",
          },
          extraCssText: "text-align:center;font-size:18px",
        },
        visualMap: {
          show: false,
          min: this.minimumData,
          max: this.highestData,
          // calculable: true,
          text: ["高", "低"], // 文本，默认为数值文本
          // seriesIndex: 1,
          inRange: {
            color: ["rgba(0,208,255,0.5)", "rgba(0,208,255,0)"],
          },
        },
        geo: {
          map: "sichuan",
          // zlevel: 10,
          show: false,
          // aspectScale: 1, //地图长度比
          roam: false, //  鼠标缩放和 平移漫游
          // layoutCenter: ["44%", "45%"], //位置
          // 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
          // layoutSize: 800, //大小
          // left: "0%",
          // right: "0%",
          // top: "0%",
          itemStyle: {
            normal: {
              areaColor: "rgba(151,236,255,0.3)",
            },
          },
          // label: {
          //   normal: {
          //     show: false, //关闭省份名展示
          //     // fontSize: "16",
          //     // color: "rgba(255,255,255)",
          //   },
          //   emphasis: {
          //     show: false,
          //     color: "#fff",
          //   },
          // },
        },

        series: [
          {
            name: "",
            type: "lines", //在 地理坐标系上画线图
            zlevel: 20,
            symbolSize: 10,
            data: mapdata.linesData,
            effect: {
              show: true,
              period: 2,
              trailLength: 0.6,
              symbol: "arrow",
              symbolSize: 6,
              color: "#FF791A", // 移动箭头颜色
            },
            lineStyle: {
              normal: {
                color: "#FF791A",
                width: 2,
                opacity: 0,
                curveness: 0.1,
              },
            },
          },
          {
            name: "",
            type: "effectScatter", //在地理坐标系画出所有的标志点
            coordinateSystem: "geo",
            zlevel: 9,
            rippleEffect: {
              brushType: "stoke",
            },
            label: {
              normal: {
                // show: true,
                position: "inside",
                formatter: function (params) {
                  //由于项目需要，只需要显示所有总的数据的标志点文字，也就是图上的圈1,2,3
                  if (params.data.type === mapdata.totalType) {
                    return params.data.i;
                  } else {
                    return "";
                  }
                },
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(255,121,26,0.4)",
                borderColor: "rgba(255,121,26,0.4)",
              },
            },
            data: mapdata.effectScatterData,
          },
          {
            type: "map",
            map: "sichuan",
            zlevel: 10,
            show: false,
            selectedMode: false,
            aspectScale: 1, //地图长度比
            roam: false, //  鼠标缩放和 平移漫游
            left: "0%",
            right: "0%",
            top: "0%",
            layoutCenter: ["45%", "44%"], //位置
            // layoutSize: "107%", //大小
            lebel: {
              show: true,
              color: "#ffffff",
              emphasis: {
                color: "#ffffff",
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: "rgba(151,236,255,0.3)",
                color: "#fff",
              },
              emphasis: {
                areaColor: "#FF791A",
                color: "#fff",
              },
            },
            data: this.coverData,
          },
        ],
      };

      this.echarts.registerMap("sichuan", sichuan);
      if (option && typeof option === "object") {
        this.mapEcharts.setOption(option, true);
      }
    },
    async getData() {
      if (this.type == 1) {
        let res = await getRequest(url.districtGmvOut);
        if (res.data.code == "000000") {
          this.allData = res.data.content.districtGmv;
          this.linesDataAll = res.data.content.flyGmv;
          this.allData.map((item) => {
            this.locationCarsList.push(item.longitude, item.latitude, item.gvm);
          });
          // 地图标注地名-总数颜色区分
          for (let item of this.allData) {
            this.coverData.push({
              name: item.name,
              value: item.gmv,
            });
          }
          for (let i = 0; i < this.allData.length; i++) {
            this.highestData = this.allData[this.allData.length - 1].gmv;
            this.minimumData = this.allData[0].gmv;
          }
          this.resetData(this.allData, 1, this.linesDataAll);
        }
      } else {
        let res = await getRequest(url.districtGmv);
        if (res.data.code == "000000") {
          this.allData = res.data.content.districtGmv;
          this.linesDataAll = res.data.content.flyGmv;
          this.allData.map((item) => {
            this.locationCarsList.push(item.longitude, item.latitude, item.gvm);
          });
          // 地图标注地名-总数颜色区分
          for (let item of this.allData) {
            this.coverData.push({
              name: item.name,
              value: item.gmv,
            });
          }
          for (let i = 0; i < this.allData.length; i++) {
            this.highestData = this.allData[this.allData.length - 1].gmv;
            this.minimumData = this.allData[0].gmv;
          }
          this.resetData(this.allData, 1, this.linesDataAll);
        }
      }
    },
    // 3s请求一次
    intervalAxios() {
      this.totalAxios = setInterval(() => {
        this.getData();
      }, 3000);
    },
  },
  destroyed() {
    clearInterval(this.totalAxios);
  },
};
</script>

<style lang="less" scoped>
.bigMap {
  height: 764px;
  width: 944px;
  background: url("https://image.hezongyy.com/pcimage/20211109img/mapborder.png")
    no-repeat center;
}
#mapid {
  transform: rotateX(40deg);
  margin-top: -190px;
}
</style>
